{% import 'components/Block/Block.html' as Block %}

{% macro render(id) %}
  <section id="{{ id }}" class="{{ id }}">
    <article class="BlockLayout BlockLayout--typePositioned">
      <div class="BlockWrapper BlockWrapper--isDropzone draggable-dropzone--occupied">
        {{ Block.render('drop', {type: 'Hollow'}) }}
        {{ Block.render('drag', {index: 1, draggable: true}) }}
      </div>

      {{ Block.render('', {index: 2, type: 'Stripes', classes: ['CollidableObstacle']}) }}
      {{ Block.render('', {index: 3, type: 'Stripes', classes: ['CollidableObstacle']}) }}

      <div class="BlockWrapper BlockWrapper--isDropzone">
        {{ Block.render('drop', {index: 4, type: 'Hollow'}) }}
      </div>

      {# If we ever implement a "constrain to container" feature, these can be removed #}
      <div class="CollidableWall CollidableWall--itemTop CollidableObstacle"></div>
      <div class="CollidableWall CollidableWall--itemRight CollidableObstacle"></div>
      <div class="CollidableWall CollidableWall--itemBottom CollidableObstacle"></div>
      <div class="CollidableWall CollidableWall--itemLeft CollidableObstacle"></div>
    </article>
  </section>
{% endmacro %}
